/*
 * @Description:
 * @Author: liyuhao
 * @Date: 2021-07-15 10:30:38
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-11-15 16:36:44
 */
import React from 'react'
import { UserOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons'
import styles from './index.module.less'

export interface RoleListItemProps {
  style?: React.CSSProperties
  selected?: boolean
  name?: string
  disableOperation?: boolean
  onEdit?: () => void
  onDelete?: () => void
  onClick?: () => void
}

const RoleListItem: React.FC<RoleListItemProps> = (props) => {
  const { style, selected, name, disableOperation, onEdit, onDelete, onClick } =
    props

  return (
    <div
      onClick={() => onClick && onClick()}
      className={`${styles['role-list-item']} ${
        selected ? styles['role-list-item-selected'] : ''
      }`}
      style={style}
    >
      <div className={styles['title']}>
        <UserOutlined
          className={styles['icon']}
          style={{ visibility: 'visible' }}
        />
        <div className={styles['name']}>{name}</div>
      </div>
      {disableOperation || (
        <>
          <EditOutlined
            onClick={() => onEdit && onEdit()}
            className={styles['icon']}
          />
          <DeleteOutlined
            onClick={() => onDelete && onDelete()}
            className={styles['icon']}
          />
        </>
      )}
    </div>
  )
}

export default RoleListItem
